<style lang="scss" scoped>
.dash,
hr {
  height: 1px;
  background-color: rgba(128, 128, 128, 0.3);
  border: none;
}
.box-card {
  width: 30%;
  text-align: center;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05);
}
</style>
<template>
  <div class="app-container">
    <AllRegionSelect v-model="areaCode" :props="{ checkStrictly: true }" />
    <div class="flex row-between my-15px">
      <el-card class="box-card">
        <div>商户数量</div>
        <hr />
        <div class="text-[#26a2ff] text-20px">{{ merchantCount }}</div>
      </el-card>
      <el-card class="box-card">
        <div>店铺数量</div>
        <hr />
        <div class="text-[#26a2ff] text-20px">{{ subMerchantCount }}</div>
      </el-card>
      <el-card class="box-card">
        <div>商品数量</div>
        <hr />
        <div class="text-[#26a2ff] text-20px">{{ goodsCount }}</div>
      </el-card>
    </div>

    <hr class="mb-15px dash" />

    <!-- 订单数量 -->
    <div>
      <div class="flex">
        <AllRegionSelect
          v-model="orderSearch.areaCode"
          class="mr-25px"
          :props="{ checkStrictly: true }"
        />
        <TimeRangePicker
          :start.sync="orderSearch.startTime"
          :end.sync="orderSearch.endTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="date"
          placeholder="开始日期/结束日期"
        />
      </div>
      <div class="flex row-between">
        <el-card class="box-card mt-15px">
          <div>订单总数量</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{ orderData.totalOrderCount }}
          </div>
        </el-card>
        <el-card class="box-card mt-15px">
          <div>已完成订单数量</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{ orderData.completeOrderCount }}
          </div>
        </el-card>
        <el-card class="box-card mt-15px">
          <div>已退款订单数量</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{ orderData.refundOrderCount }}
          </div>
        </el-card>
      </div>
      <div class="flex row-between">
        <el-card class="box-card mt-15px">
          <div>订单退款率</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{
              orderData.refundOrderRate &&
                `${(Number(orderData.refundOrderRate) * 100).toFixed(2)}%`
            }}
          </div>
        </el-card>
        <el-card class="box-card mt-15px">
          <div>已完成订单总额</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{ (orderData.completeOrderMoney / 100).toFixed(2) }} 元
          </div>
        </el-card>
        <el-card class="box-card mt-15px">
          <div>已完成票务订单数量</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{ orderData.completeTicketOrderCount }}
          </div>
        </el-card>
      </div>
      <div class="flex row-between">
        <el-card class="box-card mt-15px">
          <div>已完成酒店订单数量</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{ orderData.completeHotelOrderCount }}
          </div>
        </el-card>
        <el-card class="box-card mt-15px">
          <div>已完成实物订单数量</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{ orderData.completeRealThingOrderCount }}
          </div>
        </el-card>
        <el-card class="box-card mt-15px">
          <div>已完成券类订单数量</div>
          <hr />
          <div class="text-[#26a2ff] text-20px">
            {{ orderData.completeCouponOrderCount }}
          </div>
        </el-card>
      </div>
    </div>

    <hr class="my-15px dash" />

    <div class="filter-container flex mb-15px">
      <AllRegionSelect
        v-model="searchData.areaCode"
        :props="{ checkStrictly: true }"
        class="mr-25px"
      />
      <TimeRangePicker
        :start.sync="searchData.startTime"
        :end.sync="searchData.endTime"
        type="date-time"
        placeholder="开始日期/结束日期"
      />
    </div>

    <div class="flex flex-wrap">
      <div
        v-for="(data, key) in chatData"
        class="flex row-center"
        style="width: 50%"
      >
        <echartBar
          :title="chatMatch[key]"
          :data="data"
          data-key="orderCount"
        ></echartBar>
      </div>
    </div>
  </div>
</template>
<script>
import echartBar from './echartBar'
import TimeRangePicker from 'time-range-picker'

export default {
  components: { echartBar },
  data () {
    return {
      chatMatch: {
        couponOrderTop: '券类订单top10',
        refundOrderTop: '退款订单数量top10',
        realThingOrderTop: '实物订单top10',
        hotelOrderTop: '酒店订单top10',
        completeOrderTop: '已完成订单数量top10',
        ticketOrderTop: '票类订单top10'
      },
      searchData: {},
      chatData: {},
      orderSearch: {
        startTime: '',
        endTime: ''
      },
      orderData: {},
      subMerchantCount: '--', //子商户数量
      merchantCount: '--', //主商户数量
      orderCount: '--', //订单数
      goodsCount: '--', //商品数量
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now()
        }
      },
      areaCode: '', //所选地区code
      orderTime: TimeRangePicker.defaultDate.currentYear //订单时间
    }
  },
  watch: {
    areaCode () {
      this.getCount()
    },
    orderSearch: {
      handler () {
        this.getAllOrderCount()
      },
      deep: true
    },
    searchData: {
      handler () {
        this.queryMerchantTop()
      },
      deep: true
    }
  },
  created () {
    this.orderSearch.startTime = TimeRangePicker.defaultDate.pastOneYear[0]
    this.orderSearch.endTime = TimeRangePicker.defaultDate.pastOneYear[1]

    this.getCount()
    this.getAllOrderCount()
    this.queryMerchantTop()
  },
  methods: {
    getCount () {
      //获取顶部统计总数
      this.$POST('/sot-admin-api/report/report/merchantAndOrderCount', {
        areaCode: this.areaCode
      }).then(res => {
        if (res.errorCode == '00000') {
          this.merchantCount = res.data.merchantCount //主商户胡亮
          this.subMerchantCount = res.data.subMerchantCount //子商户数量
          this.goodsCount = res.data.goodsCount //商品数量
          this.orderCount = res.data.orderCount //订单数量
        }
      })
    },
    // 获取顶部订单数据
    getAllOrderCount () {
      this.$POST(
        '/sot-admin-api/report/report/queryOrderReportAll',
        this.orderSearch
      ).then(res => {
        if (res.errorCode == '00000') {
          this.orderData = res.data
        }
      })
    },
    // 获取top柱状图数据
    queryMerchantTop () {
      this.$POST(
        '/sot-admin-api/report/report/queryMerchantTop',
        this.searchData
      ).then(res => {
        if (res.errorCode == '00000') {
          this.chatData = res.data
        }
      })
    }
  }
}
</script>
